<template>
  <view>
    <wd-tabs v-model="tab" swipeable animated custom-class="top-tap-bar">
      <block v-for="category in categoryList" :key="category">
        <wd-tab :title="`${category}`">
          <view class="category_content">{{ category }}</view>
        </wd-tab>
      </block>
    </wd-tabs>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  inheritAttrs: false,
  options: {
    virtualHost: true,
    styleIsolation: 'shared',
  },
})

const tab = ref<number>(0)

const categoryList = ref(['支出', '收入'])
</script>

<style lang="scss" scoped>
.hide-title {
  display: none;
}

.category_content {
  line-height: 120px;
  text-align: center;
}

.top-tap-bar :deep(.wd-tabs__nav) {
  color: aquamarine;
}
</style>
